<template>
  <div class="sigin">
    <van-cell-group class="sign-form" v-show="step === 1">
      <van-field v-model="phone" placeholder="请输入手机号" class="sign-form-input">
        <img slot="label" class="sign-form-input-img" src="../../assets/images/shouji@3x.png"/>
      </van-field>
      <!-- <van-field v-model="iconregex" placeholder="请输入图形验证码" class="sign-form-input">
        <img slot="label" class="sign-form-input-img" src="../../assets/images/yanzheng@3x.png"/>
      </van-field> -->
      <van-field v-model="msg" placeholder="请输入短信验证码" class="sign-form-input">
        <img slot="label" class="sign-form-input-img" src="../../assets/images/duanxin@3x.png"/>
        <span slot="button"  :disabled="!canClick" @click="getYzm()" class="send">{{btnContent}}</span>
      </van-field>
        <van-button type="primary" class="sign-form-input-sbtn" @click="goStep2()">下一步</van-button>
    </van-cell-group>

    <van-cell-group class="sign-form" v-show="step === 2">
      <van-field v-model="pwd1" type="password" placeholder="设置新密码" class="sign-form-input">
        <img slot="label" class="sign-form-input-img" src="../../assets/images/mima@3x.png"/>
      </van-field>
      <van-field v-model="pwd2" type="password" placeholder="确认新密码" class="sign-form-input">
        <img slot="label" class="sign-form-input-img" src="../../assets/images/mima@3x.png"/>
      </van-field>
        <van-button type="primary" class="sign-form-input-sbtn" @click="goSure()">提交</van-button>
        <!-- <van-button type="primary" class="sign-form-input-rbtn" @click="goLogin()">已有账号</van-button> -->
    </van-cell-group>
  </div>
</template>

<script>
import {getYzm, changePwd} from './../../api/login'
export default {
  name: 'sign-login',
  data () {
    return {
      userName: '',
      pwd1: '',
      pwd2: '',
      email: '',
      phone: '',
      iconregex: '',
      msg: '',
      step: 1,
      canClick: true,
      btnContent: '发送短信验证码',
      totalTime: 60
    }
  },
  methods: {
    goStep2 () {
      if (this.phone && this.msg) {
        this.step = 2
      } else {
        this.$toast.fail('存在漏填项')
      }
    },
    goLogin () {
      this.$router.push({ name: 'login' })
    },
    getYzm () {
      if (this.phone) {
        const sign = {
          'phone': this.phone,
          'status': 2
        }
        getYzm(sign).then(response => {
          const data = response.data
          if (data.code === 200) {
            this.checkCode = data.checkCode
            if (!this.canClick) return // 改动的是这两行代码
            this.canClick = false
            this.btnContent = this.totalTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalTime--
              this.btnContent = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                window.clearInterval(clock)
                this.btnContent = '重新发送验证码'
                this.totalTime = 60
                this.canClick = true // 这里重新开启
              }
            }, 1000)
          } else {
            this.$toast.fail(data.msg)
          }
        }).catch(error => {
          this.$toast.fail(error)
        })
      } else {
        this.$toast.fail('请填写手机号码')
      }
    },
    goSure () {
      if (this.pwd1 && this.pwd2) {
        if (this.pwd1 === this.pwd2) {
          changePwd({account: this.phone, password: this.pwd1, phoneCode: this.msg}).then(res => {
            if (res.data.code === 200) {
              this.$toast.success('修改成功')
              this.$router.push({name: 'login'})
            } else {
              this.$toast.fail(res.data.msg)
            }
          })
        } else {
          this.$toast.fail('两次密码不一致，请重新输入')
        }
      } else {
        this.$toast.fail('存在漏填项')
      }
    }
  }
}
</script>
<style lang="stylus">
.sigin{
  .sign-form{
    .van-cell{
      padding 0px 10px
      border-bottom 1px solid rgba(216,216,216,1);
    }
    .van-field{
      .van-cell__title{
        text-align: left;
      }
    }
  }
  // .van-cell__value{
  //   padding-top 21px
  // }
  .van-checkbox__icon{
    line-height 42px
    margin-left 5px
  }
  .van-checkbox__icon .van-icon{
    width 42px
    height 42px
    line-height 42px
    font-size 32px
  }
  .van-checkbox__icon--checked .van-icon{
    border .1px solid rgba(17,177,144,1)
    background rgba(17,177,144,1)
  }
}
</style>

<style lang="stylus" scoped>

.sigin{
  padding 48px
  position fixed
  top 100px
  width calc( 100% - 96px )
  .sign-form{
    padding-top 48px
    .sign-form-input{
      height 108px
      line-height 108px
      font-size 42px
      margin-bottom 36px
      .sign-form-input-img{
        height 52px
        vertical-align middle;
      }
      .send {
        font-size:42px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(17,177,144,1);
      }

    }
    .sign-form-input-sbtn{
      width:100%;
      height:120px;
      background:rgba(17,177,144,1);
      border-radius:10px;
      font-size 42px
      margin-top 72px
    }
    .sign-form-input-rbtn{
      width:100%;
      height:120px;
      background: white;
      border-radius:10px;
      border 2px solid rgba(17,177,144,1)
      color rgba(17,177,144,1)
      margin-top 42px
      font-size 46px
    }
    .sign-form-tips{
      font-size 32px
      color #999999
      overflow hidden
      padding-top 24px
      .tips-left{
        float left
      }
      .tips-right{
        float right
        cursor pointer
      }
    }
  }

}
</style>
